<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span style="font-weight: bolder">修改密码</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="原密码" prop="oldPass">
        <el-input
          v-model="ruleForm.oldPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPass">
        <el-input
          v-model="ruleForm.newPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="surePass">
        <el-input
          v-model="ruleForm.surePass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item class="bottom">
        <el-button type="success" plain @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
// import { ElMessage } from "element-plus";
// import { useCounterStore } from "../stores/counter";
import axios from "axios";
import { useRouter } from "vue-router";
import { user_change } from "../../utils/api";
var $router = useRouter();
var ruleFormRef = ref();
var ruleForm = ref({
  oldPass: "",
  newPass: "",
  surePass: "",
});
var validateOldPass = (rule, value, callback) => {
  var phone = JSON.parse(localStorage.getItem("userinfo"));
  //   console.log(phone);
  if (value === "") {
    callback(new Error("请输入原密码"));
  } else if (phone.pass != ruleForm.value.oldPass) {
    callback(new Error("原密码不一致"));
  } else {
    callback();
  }
};
var validateNewPass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入新密码"));
  } else {
    callback();
  }
};
var validateSurePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};

const rules = ref({
  oldPass: [{ required: true, validator: validateOldPass, trigger: "change" }],
  newPass: [{ required: true, validator: validateNewPass, trigger: "change" }],
  surePass: [
    { required: true, validator: validateSurePass, trigger: "change" },
  ],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (
        ruleForm.value.newPass.length < 6 &&
        ruleForm.value.surePass.length < 6
      ) {
        ElMessage({
          message: "密码的长度不够合格",
          type: "error",
          center: true,
          grouping: true,
          duration: 1000,
        });
      } else if (ruleForm.value.newPass != ruleForm.value.surePass) {
        ElMessage({
          message: "两次输入的密码不一致",
          type: "error",
          center: true,
          grouping: true,
          duration: 1000,
        });
      } else {
        var phoneNumber = JSON.parse(localStorage.getItem("userinfo")).phone;
        // console.log(phoneNumber);
        user_change({ phone: phoneNumber, pass: ruleForm.value.newPass }).then(
          (res) => {
            if (res.data.code == 200) {
              ElMessage({
                message: res.data.msg,
                type: "success",
                center: true,
                grouping: true,
                duration: 1000,
              });
              localStorage.removeItem("token");
              setTimeout(() => {
                $router.push("/login");
              }, 1000);
            } else {
              ElMessage({
                message: res.data.msg,
                type: "error",
                center: true,
                grouping: true,
                duration: 1000,
              });
            }
            // console.log(res.data);
          }
        );
        console.log(res.data);
        console.log(res.data.list);
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 50%;
  height: 80%;
  margin-left: 25%;
}
</style>